<template>
<div class="page">
    <div v-if="!detail" class="app-container">
    <div class="top_func">
        <div class="select">
            <span>决策建议：</span>
            <a-select v-model="listQuery.suggestId" size="small" class="filter-item" allowClear style="width: 150px;" @change="handleFilter">
                <a-select-option
                        v-for="item in suggestResultList"
                        :key="item.suggestResult"
                        :value="item.id"
                >
                    {{ item.suggestResult }}
                </a-select-option>
            </a-select>
        </div>
        <div class="button">
            <a-input v-model="listQuery.word" placeholder="关键字" style="width: 200px;" size="small" class="filter-item" allowClear @keyup.enter.native="handleFilter" @clear="handleFilter" >
                <a-icon slot="prefix" type="search" :rotate="90"/>
            </a-input>
        </div>
    </div>
    <div class="content">
        <a-card :bordered="false" style="width: 0;flex: 1;" ref="card">
            <a-spin tip="未查到内容，正在向系统发出请求..." :spinning="spinning">
            <a-table
                    ref="tableList"
                    size="middle"
                    :key="tableKey"
                    rowKey="id"
                    :columns="columns"
                    :customRow="rowClick"
                    :rowClassName="tableRowClassName"
                    :data-source="list"
                    bordered
                    :pagination="true"
                    :loading="listLoading"
                    :scroll="{ y: tableContentHeight }"
            >
                <!-- 序号 -->
                <span slot="serial" slot-scope="text, record, index">{{ index<10-1? 0:'' }}{{ index + 1 }}</span>
            </a-table>
            </a-spin>
        </a-card>
    </div>
    </div>
    <model-iframe v-else :view-detail="viewDetail" :report-no="reportNo" :report-time="reportTime" :name="name" class="detail-container"/>
</div>
</template>

<script>
import {fetchCreditReportList, fetchAllCreditReportList, fetchApiCall} from '@/axios/credit-data'
import {isTranSq} from '@/utils/validate'
import waves from '@/directive/waves'
import ModelIframe from './iframe'
import {fetchSuggestResultList} from '@/axios/credit-data'

export default {
    name: "creditReports",
    components: { ModelIframe },
    directives: { waves },
    data() {
            return {
                list: null,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                showedData: [],
                listLoading: true,
                detail: false,
                tableKey: 0,
                reportNo: '',
                name: '',
                total: 0,
                state: '未查看',
                reportTime: '',
                suggestResultList: [],
                viewedList: [{
                    reportNo: '',
                    enable: ''
                }],
                listQuery: {
                    page: 1,
                    limit: 15,
                    sort: '-s',
                    reportSort: '',
                    expertSort: '',
                    ruleSort: '',
                    riskSort: '',
                    indicatorsSort: '',
                    word: null,
                    minScore: null,
                    maxScore: null,
                    suggestResult: '',
                    suggestId: '',
                    sortName: '',
                    roleName: ''
                },
                tableContentHeight:600,
                pagination:{
                    defaultPageSize:15,
                    total:0,
                    current:0,
                    showTotal: total => `共 ${total} 条数据`,
                },
                columns:[
                    {
                        title: '#',
                        dataIndex: 'id',
                        scopedSlots: { customRender: 'serial' },
                        width: 65,
                        align:'center'
                    },
                    {
                        title: '报告号',
                        align:'left',
                        ellipsis: true,
                        dataIndex: 'reportNo'
                    },
                    {
                        title: '生成日期',
                        dataIndex: 'createTime',
                        ellipsis: true,
                        width: 110,
                        defaultSortOrder: 'descend',
                        sorter:(a,b)=>a.createTime > b.createTime ? 1:-1,
                    },
                    {
                        title: '报告日期',
                        width: 110,
                        dataIndex:'reportTime',
                        ellipsis: true,
                        defaultSortOrder: 'descend',
                        sorter:(a,b)=>a.reportTime > b.reportTime ? 1:-1,
                    },
                    {
                        title: '姓名',
                        width: 120,
                        ellipsis: true,
                        dataIndex:'name'
                    },
                    {
                        title: '性别',
                        width: 60,
                        ellipsis: true,
                        dataIndex:'sex'
                    },
                    {
                        title: '年龄',
                        align: 'right',
                        width: 60,
                        ellipsis: true,
                        dataIndex:'age'
                    },
                    {
                        title: '查询原因',
                        width: 130,
                        ellipsis: true,
                        dataIndex:'queryReason'
                    },
                    {
                        title: '专家评分',
                        width: 80,
                        ellipsis: true,
                        dataIndex:'expertScore'
                    },
                    {
                        title: '决策建议',
                        width: 150,
                        ellipsis: true,
                        dataIndex:'suggestResult'
                    },
                    {
                        title: '触发规则（条）',
                        align: 'right',
                        width: 100,
                        dataIndex:'ruleHitNum'
                    },
                    {
                        title: '高风险变量（个）',
                        align: 'right',
                        width: 100,
                        dataIndex:'highRiskVar'
                    },
                    {
                        title: '高风险重要指标（个）',
                        align: 'right',
                        width: 100,
                        dataIndex:'indicatorsNum'
                    }
                ],
                spinning: false
            }
        },
    created() {
       this.getList()
       this.getNameList()
    },
    methods: {
            getBreadCrumb() {
                const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
                // const first = matched[0]
                this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
                if (this.levelList[1].name !== '征信报告列表') {
                    this.levelList[1].name = '征信报告列表'
                }
            },
            async getList() {
                this.listLoading = true
                const {data} = await fetchCreditReportList(this.listQuery)
                const items = data.items
                this.total = data.total || 0
                this.list = items || []
                this.listLoading = false
                // console.log(this.list)
            },
            fetchList() {
                this.getList()
            },
            getNameList() {
                //  调用后台接口，获取决策建议列表
                fetchSuggestResultList().then((res) => {
                    this.suggestResultList = res.data.items || []
                    console.log(res,'res')
                })
            },
            rowClick(record) {
                return {
                    on: {
                        click: () => {
                            this.viewDetail(record)
                        }
                    }
                }
            },
            viewDetail(row, column, rowIndex) {
                this.reportNo = row.reportNo
                this.name = row.name
                this.reportTime = row.reportTime
                this.detail = !this.detail
                this.row = row
                this.row.enable = 2
                if (this.row.enable === 2) {
                    this.viewedList.push({enable: row.enable, reportNo: row.reportNo})
                }
            },
            handleFilter() {
                this.listQuery.page = 1
                this.fetchList()
            },
            columnStyle({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 8) {
                    return 'text-indent: 1em !important;'
                }
            },
            tableRowClassName({row}) {
                return 'rowClass'
            }
        }
}
</script>

<style lang="less" scoped>
@topHeight:40px;
.page{
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    height: calc(100vh - 45px);
    .app-container{
        width: 100%;
        height: 100%;
        padding: 0px 10px;
        .top_func{
            width: 100%;
            height: @topHeight;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0;
            .filter-item{
                margin: 0px 5px;
            }
        }
        .content{
            display: flex;
            height: calc(100% - @topHeight);
            background-color: #ffffff;
            width: 100%;
            flex-flow: row nowrap;
            /deep/ .rowClass{
                cursor: pointer;
            }
        }
    }
    .detail-container{
        width: 100%;
        height: 100%;
    }
}
</style>
